<template>
    <h1>EL-日期时间选择器组件</h1>
    <el-date-picker type="date" v-model="rq" placeholder="选择日期"
                    format="YYYY-MM-DD"
                    value-format="yyyy-MM-DD"
                    @change="console.log(rq)">
    
    </el-date-picker>
    
    <el-date-picker type="datetime" v-model="time" placeholder="选择时间"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="yyyy-MM-DD HH:mm:ss"
                    @change="console.log(time)">
    </el-date-picker>
    <br>
    
    <el-date-picker type="datetimerange" v-model="times" placeholder="选择起止日期"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD  HH:mm:ss"
                    @change="f"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    range-separator="到"
    >
    </el-date-picker>
</template>

<script setup>
//定义变量用来收集用户选择的日期
import {ref} from "vue";

const rq = ref('')
const time = ref('')

const times = ref([]);
const f = ()=>{
    console.log(times.value);
    console.log(times.value[0]);
    console.log(times.value[1]);
}
</script>

<style scoped>

</style>